<template>
  <div class="home">
    <a-breadcrumb style="background: #fff;">
      <a-breadcrumb-item>
        <router-link to="/">工作台</router-link>
      </a-breadcrumb-item>
      <a-breadcrumb-item>
        <router-link to="/Articlemanagement">所有文章</router-link>
      </a-breadcrumb-item>

      <router-link to="/Articlemanagement/fity">分类管理</router-link>
    </a-breadcrumb>
    <div style="width:100vw;
 height:100vh;margin: 0 auto;">
      <div style="width:1240px;
height:450px;
margin: 20px 25px;
display: flex;

">
        <div style="width:450px;
height: 250px;
background-color: #fff;

">
          <p
            style="padding-left: 20px;
height: 60px;
font-size: 16px;
line-height: 60px;
border-bottom: 1px solid #eee;"
          >添加分类</p>

          <el-input
            v-model="input1"
            type="text"
            style="width: 400px;
height: 40px;

margin:10px 20px;
outline: none;
border: solid 1px #ccc;
"
            placeholder="输入分类"
          />

          <el-input
            v-model="input2"
            type="text"
            style="width: 400px;
height: 40px;

margin:10px 20px;
outline: none;
border: solid 1px #ccc;
"
            placeholder="输入分类值(请输入英文，作为路由使用)"
          />
          <button
            @click="jia"
            style="width:60px;
height: 35px;margin-left: 20px;
background: dodgerblue;
color: #fff;
border: none;
"
          >{{ li }}</button>
          <div v-show="kai" class="fs">
            <button @click="fan">返回注册</button>
            <button @click="del">删除</button>
          </div>
        </div>

        <div style="width:770px;
height: 150px;
background-color: #fff;
margin-left: 20px;
">
          <p
            style="padding-left: 20px;
height: 60px;
font-size: 16px;
line-height: 60px;
border-bottom: 1px solid #eee;"
          >所有分类</p>
          <p style="margin-left:20px">
            <span v-for="v in lis">
              <span
                style="padding: 4px;border: 1px solid #ccc;margin: 5px;"
                @click="dian(v)"
              >{{ v.username }}</span>
            </span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, reactive } from 'vue'
import { getfen, fenjia, fendel,fengeng } from '../../api'
export default defineComponent({
  setup() {


    const input1 = ref('')
    const input2 = ref('')
    const li = ref('添加') 
    const lis = ref()
    const kai = ref<any>(false)
    const id = ref()
    const dian = (v: any) => {
      input1.value = v.username
      input2.value = v.type
      id.value = v.id
      li.value = '更新'
      kai.value = true
    }
    const fan = () => {
      li.value = '添加'
      input1.value = ''
      input2.value = ''
      kai.value = false
    }
    const del = () => {
      li.value = '添加'
      input1.value = ''
      input2.value = ''
      kai.value = false
      console.log(id.value);
      fendel({ id }).then(res => {
        console.log(res);
        getfen().then(res => {
          console.log(res);
          lis.value = res.data.data
        })
      })

    }
    const jia = () => {
      if(li.value==='添加'){
        fenjia({ input1, input2 }).then(res => {
          console.log(res);
          getfen().then(res => {
            console.log(res);
            lis.value = res.data.data
          })
        })
      }else{
        fengeng({id,input1,input2}).then(res=>{
          console.log(res);
          getfen().then(res => {
        console.log(res);
        lis.value = res.data.data
      })
        })
      }
      
        
     
    }
    onMounted(() => {
      getfen().then(res => {
        console.log(res);
        lis.value = res.data.data
      })
    })
    return {
      jia,
      dian,
      input1,
      input2,
      li,
      kai,
      fan,
      lis,
      del
    }
  }
})
</script>

<style lang='scss' scoped>
</style>